<template>
  <div class="app" :class="{ 'has-background-black': darkMode }">
    <div class="container is-max-desktop py-6 px-4">
      <div v-if="loading">
        <progress class="progress is-small is-info" max="100">60%</progress>
      </div>
      <div v-if="!loading">
        <ListingsList :listings="listings" />
      </div>
      <button
        class="button is-small is-pulled-right my-4"
        @click="toggleDarkMode"
      >
        {{ darkModeButtonText }}
      </button>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import ListingsList from './components/ListingsList'
import useDarkMode from './hooks/useDarkMode'

export default {
  name: 'App',
  setup() {
    const store = useStore()
    const { darkMode, toggleDarkMode } = useDarkMode()

    // computed
    const listings = computed(() => store.getters.listings)
    const loading = computed(() => store.getters.loading)

    const darkModeButtonText = computed(() =>
      darkMode ? 'light mode' : 'dark mode'
    )

    store.dispatch('getListings')

    return {
      // isDark,
      darkMode,
      listings,
      darkModeButtonText,
      loading,
      toggleDarkMode,
    }
  },
  components: {
    ListingsList,
  },
}
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
}
</style>

<style scoped>
.app {
  width: 100%;
  height: 100%;
}
</style>
